<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p10_固定定位遮罩层</title>
    <style>
        .mask {
            background-color: rgba(0,0,0,0.3);
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }
    </style>
</head>
<body>
<div class="mask">
    <div>
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aliquid amet culpa cum doloremque ea nam,
            nesciunt nihil numquam odit, officia optio porro quam quidem quis ut voluptatum? Est, quasi.
        </div>
        <div>Accusamus cumque dolorum eaque eos iste maiores neque quas quia suscipit veritatis. Amet aspernatur dolorem
            eius impedit reiciendis? Deserunt ducimus, excepturi id ipsum itaque minima modi natus quo reiciendis sunt?
        </div>
        <div>Alias blanditiis commodi debitis dolorem doloremque dolores expedita facilis fugiat hic illum, impedit
            laborum molestiae necessitatibus nostrum obcaecati omnis perferendis placeat quasi quibusdam quisquam quod
            sint suscipit voluptate voluptatem voluptatum.
        </div>
        <div>Expedita fugit odio perferendis reprehenderit sapiente ut voluptate. Accusantium aperiam aspernatur
            consequatur, culpa, cupiditate eligendi et illo laborum maiores nisi porro quas quisquam reiciendis rem
            reprehenderit soluta tempore ullam. Facere.
        </div>
        <div>Accusamus amet aperiam aspernatur consectetur, cumque dignissimos distinctio eius, eos esse incidunt ipsum
            itaque laborum laudantium molestias, odit praesentium quasi recusandae sint suscipit tempora. Amet
            consequatur dolorum nemo omnis. Enim.
        </div>
        <div>A delectus deleniti error fugit ipsam ipsum libero necessitatibus odio perferendis possimus quibusdam
            repellendus saepe, sit suscipit velit voluptatem voluptatibus. Animi cupiditate, deserunt dicta doloribus et
            itaque modi nemo voluptatibus!
        </div>
        <div>Aspernatur atque blanditiis culpa deserunt, dolor eos facilis nobis non perspiciatis quae repellendus sequi
            velit voluptatibus. Accusantium at beatae, blanditiis corporis doloribus eos error libero natus nemo
            perspiciatis sint vel.
        </div>
        <div>Aliquam culpa molestiae non perferendis porro possimus, quam repellat sequi sunt voluptatem. Cum dolor
            dolorem error fugit iure laborum molestiae mollitia, omnis optio quia quod rem sapiente, tenetur unde
            voluptas!
        </div>
        <div>Consequatur cupiditate debitis est omnis quasi sint soluta tempore. Ab at dicta, facilis illum ipsam,
            itaque molestias nobis, odio placeat porro soluta sunt vero voluptatum. Aliquam consequatur neque quam
            saepe?
        </div>
        <div>A ad aliquam cupiditate nam nostrum. Accusantium aut distinctio dolor, dolores excepturi expedita fuga iste
            magnam odio, quae quisquam recusandae reiciendis repellendus sunt voluptates! Alias exercitationem fuga
            maiores nam vero!
        </div>
        <div>Est excepturi incidunt odio optio qui tempora! Consequatur earum enim esse fuga id iure laudantium modi
            molestiae natus nemo nihil numquam possimus quo quos sint soluta unde vel voluptate, voluptates?
        </div>
        <div>Neque, reiciendis suscipit! Accusamus accusantium ad aperiam atque culpa dolores doloribus, eos eum hic
            labore magnam maiores minima modi molestias nam non obcaecati odio quia sint sit sunt, tenetur voluptas?
        </div>
        <div>In labore modi velit veniam? Ab ad adipisci consequatur consequuntur culpa dignissimos distinctio dolorem
            eaque eligendi id in laudantium maxime molestiae nisi, obcaecati pariatur provident quam recusandae
            repellendus sequi velit.
        </div>
        <div>Accusamus accusantium alias beatae blanditiis cumque cupiditate deserunt, dignissimos doloribus ea, esse ex
            explicabo, facilis illum iure molestias nesciunt nihil officia perferendis quidem quos repellat suscipit
            tenetur velit veniam voluptatum?
        </div>
        <div>Accusantium deleniti dolor ea excepturi expedita fugiat ipsum maxime rem, repellat! Debitis ipsa, unde.
            Animi beatae, delectus deleniti dolores dolorum, explicabo fugit id illo iste nisi pariatur perferendis
            quibusdam quo!
        </div>
        <div>Accusamus accusantium aliquid animi aperiam atque beatae dolorum eaque excepturi exercitationem inventore
            ipsum itaque labore laborum molestiae molestias odio optio pariatur perferendis porro possimus quae rem
            repudiandae sequi totam, ut!
        </div>
        <div>Ad amet atque culpa cumque deleniti deserunt distinctio dolore eligendi illum in inventore ipsa ipsum
            laborum libero, maiores natus nobis, officiis pariatur quo, recusandae repudiandae sit ut voluptates.
            Officia, recusandae.
        </div>
        <div>A aliquid, animi, asperiores at autem blanditiis distinctio dolor doloribus esse est eum fugit id illum
            labore laudantium libero magnam necessitatibus nihil obcaecati optio possimus, quasi reiciendis suscipit.
            Perferendis, sapiente!
        </div>
        <div>Amet consectetur ex fuga fugiat id impedit recusandae tempore voluptates. Accusantium alias corporis
            deserunt eaque eligendi enim, fugit impedit magni non quas, qui quidem sed suscipit veniam vero voluptatibus
            voluptatum.
        </div>
        <div>Debitis dignissimos inventore natus porro sit? Aperiam aspernatur, dolore, doloremque ducimus facilis
            impedit ipsa ipsam, molestiae nobis pariatur quidem rerum sunt voluptatum? Dolore error expedita, fugit
            mollitia nulla perferendis rerum!
        </div>
        <div>Beatae blanditiis debitis enim, excepturi exercitationem nihil rem suscipit veniam. Consectetur consequatur
            consequuntur cum cupiditate distinctio eum fugit laboriosam magni nisi numquam quae, quaerat repellendus
            rerum sed tenetur veritatis vitae.
        </div>
        <div>Asperiores corporis cupiditate dolore dolorem doloribus eos fugit incidunt, magnam maxime minus molestias
            nam necessitatibus neque nesciunt omnis porro quasi quisquam saepe sequi suscipit temporibus totam velit
            veritatis vitae voluptatem!
        </div>
        <div>Amet at delectus dolore dolores ea fuga hic iusto magnam maiores nostrum obcaecati odit officia officiis
            perferendis, porro provident quia ratione recusandae rem saepe sunt suscipit ullam unde, veniam veritatis.
        </div>
        <div>Amet deserunt reprehenderit voluptatum? Asperiores blanditiis consectetur cumque doloribus eaque ipsum
            magnam nobis porro rem ullam. Accusamus aut deleniti doloremque eum facere laboriosam mollitia nihil optio,
            quisquam quod totam vero.
        </div>
        <div>Adipisci aliquam beatae et explicabo fugit, mollitia neque quo repudiandae tempora tenetur. Dolore error
            iusto nulla quaerat. Aspernatur cupiditate, illo nihil officiis quisquam ratione repellendus. Doloribus ea
            eligendi suscipit vel.
        </div>
        <div>Cumque delectus est ex facere fuga id, nihil quaerat quo repellat repellendus sed tempora velit
            voluptatibus. Animi deserunt doloremque, et illo, incidunt iste minus quos repellat sapiente ut velit
            voluptas.
        </div>
        <div>Ad alias maxime non omnis tempore! Autem debitis delectus ducimus enim error eveniet hic incidunt neque,
            odio quae. Accusamus adipisci beatae cum doloribus earum laborum nam quasi sunt veritatis voluptas?
        </div>
        <div>Accusamus accusantium aliquid amet, commodi consequuntur cumque deserunt dicta eaque eos ex exercitationem
            facere harum impedit inventore necessitatibus nemo nesciunt praesentium, quibusdam quo, reiciendis rerum
            totam ut vel vitae voluptatibus!
        </div>
        <div>Beatae consequatur corporis dolores, dolorum eaque eligendi enim error esse eum harum hic incidunt
            laudantium minima modi nemo, nesciunt quasi quidem quod repellat ullam ut velit veniam voluptate voluptatem,
            voluptatum.
        </div>
        <div>Ad aperiam delectus distinctio dolorum eius enim est explicabo facere illum in, modi molestiae mollitia
            nobis odit possimus qui, ratione reprehenderit repudiandae sequi sint, totam vel veritatis voluptas
            voluptatem voluptates.
        </div>
        <div>Eum laudantium magni necessitatibus perferendis qui quis repudiandae voluptates! Atque aut consequatur est
            exercitationem hic, nostrum quasi sunt tempora! Deleniti eum ex fugit harum iusto modi nemo tenetur totam
            voluptates!
        </div>
        <div>Ab aliquid amet at blanditiis consequatur consequuntur deserunt, dicta dolorem error ex ipsam, laboriosam
            libero nostrum officia officiis provident quaerat quam quo quod repellendus saepe sunt tempore unde
            veritatis vero!
        </div>
        <div>Aliquam aliquid amet animi at cupiditate doloremque dolorum ea error eum excepturi illum incidunt iste
            laborum neque nesciunt nisi numquam officiis perferendis quisquam, reiciendis suscipit tempore ut veniam,
            voluptatem, voluptatibus?
        </div>
        <div>Assumenda distinctio earum, et inventore ipsa iste neque nisi, nobis omnis pariatur quaerat quidem quos
            saepe sed soluta ut voluptate voluptatem voluptatum. Consequuntur deleniti non reprehenderit sapiente
            temporibus! Alias, temporibus.
        </div>
        <div>Aliquam architecto at cum dignissimos ducimus et eveniet fugit in itaque labore laboriosam, magnam maxime
            molestiae natus, omnis praesentium provident quia quos repellat rerum tempora ut voluptatibus voluptatum?
            Consequatur, et?
        </div>
        <div>Ab accusamus aliquam dolore doloremque illum laborum, omnis perferendis porro, quas quibusdam repellat
            repellendus soluta tenetur ullam vero? Doloremque libero natus rem. Aliquid consectetur iusto molestiae
            natus tempora ullam, voluptas?
        </div>
        <div>Dignissimos dolorum error et in incidunt mollitia neque officiis tempore? Asperiores commodi cumque dicta
            dolor error esse explicabo id, iste laborum nobis provident quidem ut voluptates. Ipsa omnis quisquam
            similique?
        </div>
        <div>Aliquam architecto aspernatur deserunt expedita ipsam maxime numquam tempora voluptas. A accusantium
            adipisci cum delectus facilis id in, itaque laudantium non odit optio provident quas quibusdam quis sapiente
            voluptate voluptatem.
        </div>
        <div>Aperiam cupiditate distinctio exercitationem fugiat impedit, ipsam itaque nihil odit officiis placeat sint
            voluptas voluptate. Aspernatur incidunt maiores praesentium sit vero. Alias blanditiis eius magnam odit,
            perspiciatis unde vero voluptatibus.
        </div>
        <div>Ad aspernatur blanditiis cum deleniti facere natus nesciunt nobis quaerat quas quisquam quo totam ut
            voluptas voluptatibus, voluptatum. Consequatur cum cumque delectus esse minus nisi obcaecati quidem quos,
            ratione temporibus?
        </div>
        <div>Doloremque eligendi eveniet, ipsam nulla numquam perferendis praesentium quia quis rerum sed? Aperiam
            assumenda, blanditiis delectus ea eveniet, inventore iste laboriosam nobis obcaecati omnis, praesentium quia
            repudiandae soluta suscipit vitae.
        </div>
        <div>Adipisci dicta iusto laboriosam, libero magni nam natus nulla obcaecati perspiciatis soluta. Asperiores
            commodi est facilis ipsa possimus, quo rerum veniam vitae! Ab dolor facere magni pariatur sequi voluptatem,
            voluptates?
        </div>
        <div>Aperiam cum dignissimos impedit iste libero magnam nulla veniam? Perferendis, repudiandae, totam! Aperiam
            dignissimos ea eveniet fugiat, harum iure magni molestiae molestias optio quibusdam quis rem repudiandae sit
            temporibus vero?
        </div>
        <div>Commodi consectetur, dolores doloribus ducimus eligendi esse et eum illum iusto molestias pariatur porro
            quidem reiciendis rem tempora vero voluptatibus. Cumque exercitationem repudiandae sunt. Consectetur ducimus
            earum optio reiciendis repellendus.
        </div>
        <div>Accusantium aspernatur consequuntur qui quos rerum tempore totam ut veniam! Accusantium, consequuntur,
            cumque distinctio dolor eos, eveniet excepturi expedita minima neque nobis nulla numquam perferendis ratione
            repellendus repudiandae sequi tenetur?
        </div>
        <div>Adipisci assumenda commodi consectetur delectus dignissimos doloribus esse eveniet facilis fugiat harum
            illo libero maxime mollitia numquam obcaecati possimus provident qui quibusdam quo reprehenderit sed,
            tempora temporibus veniam vitae voluptate.
        </div>
        <div>Assumenda cupiditate eaque earum, eius harum qui sapiente totam voluptas? Eligendi facere fugiat fugit
            libero ratione, reiciendis rerum voluptate! Accusamus aspernatur atque corporis dicta ducimus eveniet
            excepturi ipsa molestias ullam!
        </div>
        <div>A asperiores corporis cum dolor eum fugiat harum incidunt neque odio, officiis possimus quam sequi soluta
            tempora voluptatum. Deserunt modi molestiae possimus repellat vitae voluptatibus voluptatum! A facilis
            perferendis quam.
        </div>
        <div>Alias architecto at aut, dolore earum eveniet, exercitationem maxime natus quae quam sapiente vel? Aliquid
            architecto at excepturi mollitia nisi provident quae saepe sapiente similique voluptatem! Accusamus
            explicabo quam sit.
        </div>
        <div>Accusantium animi at beatae consequatur culpa cum cumque cupiditate dolore doloremque dolorum eius eligendi
            est facilis fugiat ipsa itaque iure maiores modi nobis, obcaecati, omnis quam reiciendis vitae voluptas
            voluptatum!
        </div>
        <div>Aperiam consequatur doloremque et fuga laborum laudantium nobis pariatur porro quibusdam, recusandae
            suscipit ut. Doloribus laudantium quae quibusdam quisquam quod reiciendis totam. Alias dicta ea laborum
            magni minima? Quo, temporibus.
        </div>
        <div>Accusamus at cupiditate deleniti dolores et, eum ipsam, maiores nisi quaerat, quas sint sit voluptatibus
            voluptatum. Consequuntur distinctio earum ex impedit necessitatibus nemo nesciunt optio recusandae vero!
            Dignissimos, explicabo, soluta?
        </div>
        <div>Accusamus animi, culpa debitis facere iusto laborum magnam necessitatibus praesentium quas quia, quis
            quisquam similique, suscipit tempore unde. Animi beatae, debitis deserunt dolorem error eum excepturi maxime
            minima officia officiis?
        </div>
        <div>Fuga, id nisi. Debitis distinctio enim exercitationem nisi numquam quibusdam quis. Ab atque cupiditate
            deserunt doloremque fuga hic incidunt inventore ipsum iste, laborum provident quibusdam quidem recusandae
            tenetur totam vel.
        </div>
        <div>Dolor dolores expedita necessitatibus. Accusantium consequuntur, dicta eaque esse est facilis fugiat illo
            illum magni nam praesentium, quae quo suscipit tempore, temporibus! Animi corporis doloribus excepturi ipsum
            nemo sunt voluptates?
        </div>
        <div>Aliquid amet asperiores cum, debitis dolorem dolorum, enim expedita fuga illo illum impedit ipsa ipsum iste
            nostrum odio quae qui quibusdam quod quos reiciendis repellendus saepe sequi sint suscipit voluptatibus?
        </div>
        <div>Autem consectetur delectus dignissimos, eaque eos, eum fugiat illum impedit ipsum laboriosam laudantium
            neque nihil nisi nobis pariatur porro possimus provident, quis rem repellat sapiente sint suscipit tempora
            tempore unde!
        </div>
        <div>Asperiores atque explicabo in ipsa molestiae nam recusandae, sequi similique. Accusamus aspernatur
            cupiditate eos, harum id impedit itaque libero magnam molestias nemo nihil, numquam pariatur, quae quos
            reprehenderit suscipit tempora?
        </div>
        <div>Ad aperiam aspernatur, at blanditiis consequuntur culpa cumque dicta dignissimos distinctio dolore dolorum
            ducimus eaque earum exercitationem facilis ipsa maxime minima molestias nesciunt nisi placeat quos saepe sit
            sunt ut.
        </div>
        <div>Alias asperiores hic in nostrum odit quam quidem, quos? Assumenda, commodi culpa cum cupiditate dolor
            doloremque ea fugiat hic impedit ipsum iusto magnam natus obcaecati quas quidem sapiente vero voluptatum!
        </div>
    </div>
</div>
</body>
</html>